<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./03 - 饿了么购物车.css">
    <script src="./vue-2.5.21.js"></script>
</head>

<body>
    <div id="root">
        <main>
            <div class="shangpin" v-for="(item,index) in yixuan">
                <h4>{{item.name}}</h4>
                <p @click="qingkong">{{item.age}}</p>
            </div>

            <div class="juwei" v-for="(item,index) in shangpin1">
                <div class="juwei-img">
                    <img :src="item.img" alt="">
                </div>

                <div class="juwei-center">
                    <h4>{{item.ming}}</h4>
                    <p style="color: red;font-size :18px;">￥{{item.jiaqian}}</p>
                </div>

                <div class="juwei-right">
                    <div class="qi">
                        <button @click="jian(item)">—</button>
                        <span>{{item.count}}</span>
                        <button style="background-color: aqua;" @click="jia(item)">+</button>
                    </div>
                </div>
            </div>
            <div class="go" v-show="shangpin != 0">快去买点东西吧!!!</div>
        </main>
        <footer>
            <div class="footer-left" v-for="(item,index) in zongjia" :key="index">
                <div style="color: #fff;">个数::{{zongjiaerdianling}}</div>
                <div style="color: gray;font-size: .75rem;">￥总价::{{quan}}</div>
            </div>

            <div class="footer-right">
                <button>去结算</button>
            </div>

        </footer>
    </div>
</body>

</html>

<script>
    const vm = new Vue({
        el: '#root',
        data() {
            return {
                yixuan: [
                    { name: '已选商品', age: '清空' }
                ],
                shangpin1: [
                    { img: './R-C.gif', ming: '秋刀鱼/斤', jiaqian: 35, count: 1 },
                    { img: './R-C.gif', ming: '鲜大带鱼/条', jiaqian: 45, count: 1 },
                    { img: './R-C.gif', ming: '鲜活全母皮皮虾/斤', jiaqian: 85, count: 1 },
                    { img: './R-C.gif', ming: '秋刀鱼/斤', jiaqian: 35, count: 1 },
                    { img: './R-C.gif', ming: '鲜大带鱼/条', jiaqian: 45, count: 1 },
                    { img: './R-C.gif', ming: '鲜活全母皮皮虾/斤', jiaqian: 85, count: 1 },
                    { img: './R-C.gif', ming: '秋刀鱼/斤', jiaqian: 35, count: 1 },
                    { img: './R-C.gif', ming: '鲜大带鱼/条', jiaqian: 45, count: 1 },
                    { img: './R-C.gif', ming: '鲜活全母皮皮虾/斤', jiaqian: 85, count: 1 },
                    { img: './R-C.gif', ming: '秋刀鱼/斤', jiaqian: 35, count: 1 },
                    { img: './R-C.gif', ming: '鲜大带鱼/条', jiaqian: 45, count: 1 },
                    { img: './R-C.gif', ming: '鲜活全母皮皮虾/斤', jiaqian: 85, count: 1 },
                ],
                zongjia: [
                    { jine: 527, name: '另需配送费35元' }
                ]
            }
        },
        methods: {
            qingkong() {
                this.shangpin1 = []
            },
            jia(item) {
                if (item.count >= 5) return alert('已达到可以买取的最大数量')
                item.count++
            },
            jian(item) {
                if (item.count == 1) return alert('不能再少啦！！！')
                item.count--
            }
        },
        computed: {
            zongjiaerdianling() {
                let sum = 0;
                this.shangpin1.forEach((item) => {
                    sum += item.count
                })
                return sum;
            },

            quan: {
                get() {
                    let sum = 0;
                    this.shangpin1.forEach((item) => {
                        sum += item.jiaqian * item.count
                    })
                    return sum;
                }
            }
        }
    })
</script>